import React, { Component } from 'react';

class App extends Component {
  // 挂载阶段
  constructor() {
    super()

    this.state = {
      count: 1
    }

    // 1. 方案一： 可以constructor 绑定this
    // this.handleClick = this.handleClick.bind(this)
  }
  // 2. 方案二： class field 箭头函数方案
  handleClick(e, num) {
    console.log(e, num);
  }
  // componentWillMount() {
  //     console.log(1);
  // }
  render() {
    const { count } = this.state
    return (
      <div className="app">
        <h1>{count}</h1>
        {/* <button onClick={ 方案一变形 this.handleClick.bind(this) } >+1</button> */}
        <button onClick={ /** 方案二变形 */ (e) => this.handleClick(e, 1) }>+1</button>
      </div>
    );
  }

  componentDidMount() {
    console.log(3);
  }


  // 更新阶段
  shouldComponentUpdate(nextProps, nextState) {
    if (nextState.count > 5) {
      return false
    }
    return true
  }
  // render() {

  // }
  componentDidUpdate() {

  }

  // 
  // componentWillUpdate() {

  // }
  // componentWillReceiveProps() {

  // }

}

export default App;
